<template>
  <Form :label-width="110" mode="single" :model="data" ref="form" showErrorTip :rules="validRules">
    <FormItem label="门店图片(选填)" prop="photo_list">
      <Upload v-model="data.photo_list" mode="wechat" :limit="9"></Upload>
    </FormItem>
    <FormItem label="营业执照" prop="sid">
      <input type="text" v-width="392" v-model="data.sid" />
      <p class="frm_tips">请输入营业执照上统一社会机构代码</p>
    </FormItem>
    <FormItem label="支付商户号" prop="mch_id">
      <input type="text" v-width="392" v-model="data.mch_id" />
    </FormItem>
    <FormItem label="电话" prop="telephone">
      <input type="text" v-width="392" v-model="data.telephone" />
      <p class="frm_tips">固定电话需加区号；区号、分机号均用“-”连接</p>
    </FormItem>
    <FormItem label="人均价格(选填)" prop="avg_price">
      <input type="text" v-width="392" v-model="data.avg_price" />
      <p class="frm_tips">大于零的整数，须如实填写，默认单位为人民币</p>
    </FormItem>
    <FormItem label="营业时间(选填)" prop="open_time">
      <input type="text" v-width="392" v-model="data.open_time" />
      <p class="frm_tips">如，10:00-21:00</p>
    </FormItem>
    <FormItem label="推荐(选填)" prop="recommend">
      <textarea v-width="392" v-model="data.recommend"></textarea>
      <p class="frm_tips">如，推荐菜，推荐景点，推荐房间</p>
    </FormItem>
    <FormItem label="特色服务(选填)" prop="special">
      <textarea v-width="392" v-model="data.special"></textarea>
      <p class="frm_tips">如，免费停车，WiFi</p>
    </FormItem>
    <FormItem label="简介(选填)" prop="introduction">
      <textarea v-width="392" v-model="data.introduction"></textarea>
      <p class="frm_tips">对品牌或门店的简要介绍</p>
    </FormItem>
    <FormItem label="所在商圈" prop="bus_dis_id">
      <Address v-model="address"></Address>
      <Select v-model="data.bus_dis_id" :datas="bus_dis_list" keyName="_id" titleName="name" style="width:30%;margin-top: 20px;"></Select>
    </FormItem>
    <FormItem label="门店列表" prop="shop_list">
      <p class="frm_tips">关联的门店列表</p>
    </FormItem>
    <FormItem label="短信通知手机" prop="sms_mobile">
      <input type="text" v-width="392" v-model="data.sms_mobile" />
      <p class="frm_tips">下单通知提醒接收手机号</p>
    </FormItem>
    <FormItem label="支付等级">
      <input type="text" v-width="130" v-model="pay_level.one" placeholder="一档金额" />&nbsp;&nbsp;&nbsp;
      <input type="text" v-width="130" v-model="pay_level.two" placeholder="二档金额" />&nbsp;&nbsp;&nbsp;
      <input type="text" v-width="130" v-model="pay_level.three" placeholder="三档金额" />
      <p class="frm_tips">支付不同的金额，获得不同等级优惠券，输入档位金额，例如 100,500,2000 表示100以内一个档位 100-500一个档位...</p>
    </FormItem>
  </Form>
</template>
<script type="text/javascript">
import Upload from '@/components/upload.vue';
import Address from '@/components/address/address.vue';
export default {
  components: {
    Upload,
    Address
  },
  props: {
    value: [Array, Object]
  },
  data() {
    return {
      _id: '',
      data: { photo_list: [] },
      isLoading: false,
      pay_level: { one: '', two: '', three: '' },
      address: {
        province: '浙江省',
        city: '嘉兴市',
        area: ''
      },
      bus_dis_list: [],
      validRules: {
        rules: {
          avg_price: {
            type: 'number',
            valid(prop, parent, data) {
              if (prop <= 0) {
                return '必须大于0'
              }
              return true;
            }
          },
          introduction: {
            maxLen: 300
          },
          telephone: {
            valid: {
              pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
              message: '请输入正确的手机号或固定电话'
            }
          }
        },
        required: ['telephone', 'sid', 'open_time', 'special', 'photo_list']
      }
    };
  },
  /**
   * 页面渲染前
   * @return {[type]} [description]
   */
  created() {

  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {

  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {
    this.data = JSON.parse(JSON.stringify(this.value))
    this._id = this.data._id
    delete this.data._id
    let pay_level = this.data.pay_level.split('|')
    this.pay_level = {
      one: pay_level[0],
      two: pay_level[1],
      three: pay_level[2]
    }
    if (this.data.bus_dis_id) {
      this.getBusDis(this.data.bus_dis_id)
    }
  },
  watch: {
    address: {
      handler: function(newVal, oldVal) {
        let data = JSON.parse(JSON.stringify(newVal))
        data.status = 1
        data.county = data.area
        delete data.area
        this.$cloud.view('businessDistrict','multi','businessDistrict._uniqueid = multi._uniqueid').where(data).select().then(res => {
          this.bus_dis_list = res
        }).catch(error => {
          console.log('数据库操作报错', error);
        });
      },
      deep: true
    }
  },
  methods: {
    affirm(e) {
      let { handleCancel } = e;
      //处理支付等级
      let one = parseFloat(this.pay_level.one)
      let two = parseFloat(this.pay_level.two)
      let three = parseFloat(this.pay_level.three)
      if (one && two && three) {
        if (one < two && two < three) {
          this.data.pay_level = one + '|' + two + '|' + three
        } else {
          this.$Message.error('档位金额不规范');
          return false
        }
      } else {
        this.$Message.error('请添加支付等级');
        return false
      }

      // 格式化图片列表
      // let photo_list = [];
      // for (let i in this.data.photo_list) {
      //   let item = this.data.photo_list[i];
      //   photo_list[i] = {
      //     photo_url: item
      //   };
      // }
      // this.data.photo_list = photo_list;
      this.updateShop(handleCancel);
    },
    addPoi(data) {
      this.$cloud.wechat().addPoi(data).then(res => {
        console.log('res', res);
        this.updateShop(data._id, res.poi_id);
      }).catch(error => {
        console.log('创建门店报错', error);
      });
    },
    /**
     * 更新门店数据
     * @return {[type]} [description]
     */
    updateShop(handleCancel) {
      this.$cloud.name('shop').where({ _id: this._id }).update(this.data).then(res => {
        handleCancel();
      }).catch(error => {
        console.log('数据库操作报错', error);
      });
    },
    getBusDis(_id) {
      this.$cloud.view('businessDistrict','multi','businessDistrict._uniqueid = multi._uniqueid').where({ _id }).select().then(res => {
        this.address.province = res[0].province
        this.address.city = res[0].city
        this.address.area = res[0].county
      }).catch(error => {
        console.log('数据库操作报错', error);
      });

    }
  }
};

</script>
<style lang="less" scoped="true">
.frm_tips {
  width: auto;
  padding-top: 4px;
  width: 300px;
  color: #9a9a9a;
}

.frm_title {
  font-size: 14px;
  height: 32px;
  line-height: 32px;
  border-bottom: 1px solid #e7e7eb;
  margin-bottom: 25px;
  font-weight: normal;

  .frm_title_dec {
    color: #9a9a9a;
    margin-left: 1em;
    font-weight: normal;
  }
}

</style>
